<template>
    <div class="playmusic" >
        <div class="bag" :style="{backgroundImage:`url(${musicinfo.al.picUrl})`}">

        </div>
          <!-- 音乐播放菜单 -->
          <!-- 头部部分 -->
          <myHead>
              <template v-slot:left>
                    <i class="iconfont icon-xitongfanhui" @click="$emit('back')"></i>
              </template>
              <template v-slot:center>
                    <span class="cet" >{{musicinfo.name}}</span>
              </template>
              <template v-slot:right>
                    <i class="iconfont icon-fenxiang"></i>
              </template> 
          </myHead>

          <!-- 中间图片部分 -->
          <div class="tuname" @click="iswords = !iswords" v-show="!iswords">
              <img :src="musicinfo.al.picUrl" alt="" :class="{'active':!paused}">
          </div>
          <!-- 歌词部分 -->
          <div class="words" @click="iswords = !iswords" v-show="iswords">
            
              <p :class="{col: item.pretime <= currentTime && currentTime <  item.time }" v-for="item in  $store.getters['playcontroller/lyriclist']">{{ item.lyric }}</p>
          </div>
          <!-- 底部模块部分 -->
          <div class="mufoot">
              <div></div>
               <div class="edbtn">
                  <div><i class="iconfont icon-24gl-repeat2"></i></div>
                  <div @click="prev(false)"><i class="iconfont icon-48shangyishou"></i></div>
                  <div @click="playmusic"> 
                    <div class="playbtn">
                      <i v-if="paused" class="iconfont icon-sanjiaoright"></i>
                      <i v-else class="iconfont icon-zanting"></i>
                    </div>
                  </div>  
                  <div @click="prev(true)"><i class="iconfont icon-49xiayishou"></i></div>
                  <div><i class="iconfont icon-gengduo"></i></div>
               </div>
          </div>
          
    </div>
</template>

<script>
import myHead from 'components/myhead/myhead.vue'

import { mapMutations,mapState } from 'vuex'
export default {
    name:'playmusic',
    components:{
      myHead
    },  
    props:['musicinfo' ,'playmusic','paused'],
    computed:{
        ...mapState('playcontroller',['conindex','currentTime'])
    },  
    data() {
        return {
            // 搞个变量来接受vuex 中的数据 操作后去修改
            current: 0,
            iswords: false,
        };
    },
    methods: {
      ...mapMutations('playcontroller',['setCurrentMusic']),
      prev(tru){
          this.current = this.conindex

          // 上一首或者下一首
          if(!tru){
             this.current--
          }else{
             this.current++
          }

          // 判断超出 还是 没超过
          if(this.current <= 0 ){
            alert('没有拉')
            return
          }else if( this.current >= 10){
            alert('也没拉')
            return
          }
          
          // 修改vuex存的第几首音乐
          this.setCurrentMusic(this.current)
          //  this.playmusic()
          this.$nextTick(() => {
            this.playmusic()
          })
      }
    }
};
</script>

<style scoped lang="scss">
.playmusic{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  padding: 0rem .1rem;
  box-sizing: border-box;
  .bag{
      position: fixed;
      width: 100vw;
      height: 100vh;
      filter: blur(70px);
      z-index: -1;
  }
  .head{
    height: .4rem;
    background-color: transparent;
    .cet{
      background-color: transparent;
    }
  }
  .tuname{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 68vh;
    // background-color: ;
    img{
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%; 
    }
   
  }


  .words::-webkit-scrollbar {
    display: none;
  }
  .words{
    height: 68vh;
    overflow-y: scroll;
    text-align: center;
    margin-top: 10vh;
    p{
      line-height: .3rem;
      color: #fff;
    }
    .col{
      color: brown;
    }
  }
 


  .mufoot{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    .edbtn{
      height: .5rem;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      >div{
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .playbtn{
          border: 1px solid #eee;
          border-radius: 50%;
          width: .4rem;
          height: .4rem;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

// 播放时激活动画
.active{
  animation:turn 3s linear infinite;      
}
@keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  }

</style>
